<template>
	<view class="v-dialog-overlay" v-if="visible">
		<view :class="['v-dialog', `v-dialog--${size}`]" :style="dialogStyle">
			<view class="v-dialog-header">
				<slot name="header">
					<text class="v-dialog-title">{{ title }}</text>
					<button class="v-dialog-close" @click="handleClose">×</button>
				</slot>
			</view>

			<view class="v-dialog-body">
				<slot></slot>
			</view>
			<view class="v-dialog-footer">
				<slot name="footer">
					<view class="v-dialog-buttons">
						<v-button type="info" @click="handleClose">取消</v-button>
						<v-button @click="handleSubmit">确定</v-button>
					</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, watch,inject } from 'vue';

/**
 * v-dialog 对话框
 * value	是否显示
 * title	标题
 * size		大小
 * width	宽度
 * height	长度
 * isCover	是否需要遮罩层		默认值:true		可选值:false不需要	true需要
 *
 * 相关事件close、submit
 */
const props = defineProps({
	value: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: ''
	},
	size: {
		type: String,
		default: 'medium',
		validator: (value: string) => {
			return ['small', 'medium', 'large'].includes(value);
		}
	},
	width: {
		type: [String, Number],
		default: ''
	},
	height: {
		type: [String, Number],
		default: ''
	},
	isCover: {
		type: Boolean,
		default: true
	}
});

const emit = defineEmits(['update:value', 'close', 'submit']);

const config = inject<any>('config');
const visible = ref(props.value);

watch(
	() => props.value,
	(newVal) => {
		visible.value = newVal;
	}
);

const dialogStyle = computed(() => {
	const style: Record<string, string | number> = {};
	if (props.width) style.width = `${props.width}`;
	if (props.height) style.height = `${props.height}`;
	return style;
});

const handleClose = () => {
	visible.value = false;
	emit('update:value', false);
	emit('close');
};

const handleSubmit = () => {
	visible.value = false;
	emit('update:value', false);
	emit('submit');
};
const overlay = props.isCover ? `rgba(0,0,0,${config.opacity.mask})` : 'transparent';
</script>

<style lang="scss" scoped>
.v-dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: v-bind("overlay");
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.v-dialog {
	width: 600rpx;
	background-color: v-bind("config.backgroundColor.reversal");
	overflow: hidden;

	&--small {
		width: 500rpx;
	}

	&--medium {
		width: 600rpx;
	}

	&--large {
		width: 700rpx;
	}

	.v-dialog-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx;
		border-bottom: 1rpx solid v-bind("config.border.color");
	}

	.v-dialog-title {
		font-size: v-bind("config.fontSize.smallTitle");
		font-weight: bold;
		color: v-bind("config.fontColor.mianTitle");
	}

	.v-dialog-close {
		background: none;
		border: none;
		font-size: v-bind("config.fontSize.mediumText");
		cursor: pointer;
		color: v-bind("config.fontColor.text");
		margin: 0;
	}

	.v-dialog-body {
		padding: 16rpx;
		overflow-y: auto;
	}

	.v-dialog-footer {
		padding: 16rpx;
		border-top: 1rpx solid v-bind("config.border.color");
		text-align: right;
		.v-dialog-buttons {
			display: flex;
			justify-content: right;
			width: 100%;
			height: 100%;

			.v-button {
				margin: 0 10rpx;
			}
		}
	}
}
</style>
